본문으로 건너뛰기

원시 타입과 참조 타입

🧑🏻‍💻 원시 타입과 참조 타입

✅ 원시 값

원시 타입은 number, bigint, string, boolean, null, undefined와 symbol이 있다.

원시 값

원시 값은 immutable 이므로 원시 값이 할당된 변수의 값을 변경하려면 메모리에 원시 값을 새롭게 생성해야 한다.

var score = 80;
var copy = score;

score = 100;

console.log(score, copy); // 100 80

원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 ‘복사’되어 생성된 새로운 메모리 주소가 전달된다.
즉 두 변수의 원시 값은 서로 다른 메모리 공간에 저장되어 어느 한쪽에서 값을 변경하더라도 서로 간섭이 일어나지 않는다.

var score = 80;
// 참고 : 깊은 복사
var copy = score;

console.log(score === copy); // true

score = 100;

console.log(score === copy); // false

이때 원시 값을 갖는 변수끼리의 비교는 해당 변수의 메모리 주소 값이 아닌 변수 메모리에 들어있는 원시 값끼리 이루어 진다.

✅ 참조 값

참조 타입은 array, object , function 등 이 있다.

참조 값

참조 값은 mutable 이므로 참조 값을 할당한 변수는 참조 값 변동 없이 메모리에 저장된 객체를 직접 수정할 수 있다.

var person = {
    name: 'Lee'
};

// 참고 : 얕은 복사
var copy = person;

console.log(person.name, copy.name); // 'Lee' 'Lee'

copy.name = 'Hoon';

console.log(person.name, copy.name); // 'Hoon' 'Hoon'

객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다.
즉 여러 개의 식별자가 하나의 객체를 공유하게 되고, 원본 또는 사본 중 어느 한쪽에서 객체의 프로퍼티를 수정하면 서로 영향을 주고받는다.

var person1 = {
    nane: 'Lee',
    a: {}
};

var person2 = {
    nane: 'Lee',
    a: {}
};

console.log(person1 === person2); // false
console.log(person1.name === person2.name); // true
console.log(person1.a === person2.a); // false

이때 참조 값을 갖는 변수의 비교는 해당 변수의 메모리 주소 값이 아닌 참조 값이 있는 메모리 주소이다.
두 person의 name 프로퍼티는 문자열 즉 원시 값을 가지기 때문에 원시 값끼리 비교가 이루어 지고 값이 같으므로 true 이다.
이때 두 person의 a 프로퍼티는 서로 다른 참조 값을 가지기 때문에 false 이다.

✅ 문자열로 보는 원시 값의 불변성과 효과

var str = 'string';
str[0] = 'S';

console.log(str); // string

var str = 'string';
str = 'hello';

console.log(str); // hello (string은 메모리에 아직 남아있다.)

원시 값이 할당된 변수 값을 변경하기 위해 원시 값을 재할당할 때 재할당된 값을 저장한 새로운 메모리 공간을 확보하고, 변수가 참조하던 메모리 공간의 주소를 변경하는 것을 불변성(immutablility) 이라 한다.
이러한 특성 때문에 동일한 원시 값을 보유한 변수들 중 어느 한쪽에서 값을 변경하더라도 서로 간섭이 일어나지 않는다.
즉 불변성은 데이터 신뢰성을 보장하고 상태 변경 추적을 쉽게 만드는 효과를 가져다 준다.

참고 자료

모던 자바스크립트 Deep Dive (사진 출처)

🧑🏻‍💻 원시 타입과 참조 타입